<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>学生信息</title>
<link rel="stylesheet" type="text/css" href="../../../css/q_main/main.css">
<link rel="stylesheet" type="text/css"
	href="../../../../css/popups/fy-alert.css">
<link rel="stylesheet" type="text/css"
	href="../../../../css/popups/demo.css">

<link rel="stylesheet" href="../../../../css/Semantic/semantic.min.css" />
<link rel="stylesheet" href="../../../../layui/css/layui.css" media="all">
<!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
<script src="../../../layui/layui.js"></script>
<script src="../../../../js/vue/vue.js"></script>
<script src="../../../../js/vue/axios.min.js"></script>
<style>
th {
	font-size: 20px;
	border-bottom: 2px solid;
	padding-bottom: 10px;
}

table td {
	border-bottom: 1px solid;
}

table td button {
	cursor: pointer;
}

table td button:hover {
	color: #999999;
}

.zth-skill-div {
	border: 1px solid;
	height: 500px;
	width:100%;
	overflow-y: auto;
	overflow-x: hidden;
}
#zth-sn span{
	color:red;
}
#zth-sn i{
	color: green;
}
</style>
</head>
<body>
	<div id="app">
		<aside>
			<a class="cur_a"><span>首页</span></a> <a><span>个人信息</span></a> <a><span>请假记录</span></a>
			<a><span>考勤记录</span></a> <a><span>近期公告</span></a>
		</aside>
		<section class="page_one" id="page1">
			<nav>
				<div class="nav_wrap">
					<div class="resume_logo">
						<a href="index.html">message</a>
					</div>
					<div class="nav_bar">
						<ul class="nav_bar_ul">
							<li><a href="index.html">首页</a></li>
							<li><a href="#">请假</a></li>
							<li><a href="#">申请</a></li>
						</ul>
					</div>
				</div>
			</nav>

			<div class="cen_con">
				<div class="portrait">
					<img :src="url">
				</div>
				<div class="cen_text">
					<h2>世上只有想不通的人，没有走不通的路。</h2>
					<hr>
					<h3>姓名：{{name}}</h3>
					<h3>职位：{{position_name}}</h3>
					<h3>地址：{{address}}</h3>
				</div>

			</div>
			<div class="down_arrow">
				<a class="scroll"><span></span></a>
			</div>

		</section>

		<section class="page_two" id="page2">
			<div class="con_wrap">
				<div class="tit_wrap">
					<h1>我的信息</h1>
					<div class="scissors">
						<span></span>
					</div>
					<h2 style="margin-left: 150px">学习是对自己的一种态度，学进去是对自己的一种责任</h2>
				</div>
				<div class="myinfo">
					<table>
						<tbody>
							<tr>
								<td rowspan="6"><img :src="url" width="200px"></td>
								<td>姓名 | {{name}}</td>
								<td>手机 | {{phone}}</td>

							</tr>
							<tr>
								<td>性别 | {{sexs}}</td>
								<td>年龄 | {{age}}</td>
							</tr>
							<tr>
								<td>身份证 | {{identity}}</td>
								<td>班级 | {{zname}}</td>
							</tr>
							<tr>
								<td>职位 | {{position_name}}</td>
								<td>入学时间 | {{entry_time}}</td>
							</tr>
							<tr>
								<td>账号 | {{username}}</td>
								<td>班主任 |{{teacher_name}}</td>
							</tr>
						</tbody>

					</table>
					<div style="width: 216px; margin: 0; margin-left: 35%">
						<button type="button" class="layui-btn layui-btn-fluid" @click="edit">修改数据</button>
					</div>
				</div>
			</div>
			<div class="down_arrow">
				<a class="scroll"><span></span></a>
			</div>
		</section>
		<section class="page_three" id="page3">
			<div class="con_wrap">
				<div class="tit_wrap">
					<h1>请假记录</h1>
					<div class="scissors">
						<span></span>
					</div>
					<h2>我们该把时间都用在学习的路上，用在进步的路上</h2>
				</div>
				<div class="skill_con">
					<div class="zth-skill-div">
						<div class="myinfo" style="margin:20px">
						<div id="zth-sn">
							<table>
								<tbody>
									<tr>
										<th>姓名：</th>
										<th>班级</th>
										<th>班主任</th>
										<th>请假时间</th>
										<th>截止时间</th>
										<th>请假类型</th>
										<th>是否批准</th>
										<th>事由</th>
									</tr>
									<tr v-for="ss in leaves">
										<td style="font-size: 14px">{{name}}</td>
										<td style="font-size: 14px">{{zname}}</td>
										<td style="font-size: 14px">{{ss.teacher_name}}</td>
										<td style="font-size: 14px">{{ss.begin_time}}</td>
										<td style="font-size: 14px">{{ss.finish_time}}</td>
										<td style="font-size: 14px" v-html="ss.leave_affair==1?'事假':ss.leave_affair==2?'病假':其他">{{ss.leave_affair}}</td>
										<td style="font-size: 14px" v-html="ss.state==0?'<span>否</span>':'<i>是</i>'"></td>
										<td style="font-size: 14px"><button @click="s1(ss.leave_reason)">查看事由</button></td>
									</tr>
								<tbody>
							</table>
							</div>
						</div>
					</div>
				</div>

			</div>
	
	<div class="down_arrow">
		<a class="scroll"><span></span></a>
	</div>
	</section>
	<section class="page_four" id="page4">
		<div class="con_wrap">
			<div class="tit_wrap">
				<h1>考勤信息</h1>
				<div class="scissors">
					<span></span>
				</div>
				<h2>我现在做的一切仅仅是为了不让未来的自己后悔。</h2>
			</div>
			<div class="zth-skill-div">
				<div class="myinfo" style="margin:20px">
					<table>
						<tbody>
							<tr>
								<th>姓名</th>
								<th>性别</th>
								<th>班级</th>
								<th>考勤老师</th>
								<th>时间</th>
								<th>类型</th>
								<th>事由</th>
							</tr>
							<tr v-for="ss in attendance">
								<td style="font-size: 14px">{{name}}</td>
								<td style="font-size: 14px">{{sexs}}</td>
								<td style="font-size: 14px">{{zname}}</td>
								<td style="font-size: 14px">{{ss.teacher_name}}</td>
								<td style="font-size: 14px">{{ss.time}}</td>
								<td style="font-size: 14px" v-html="ss.state==0?'旷课':ss.state==1?'早退':ss.state==2?'迟到':'请假'"></td>
								<td style="font-size: 14px"><button @click="s1(ss.reason)">查看事由</button></td>
							</tr>
						<tbody>
					</table>
				</div>
			</div>
		</div>
		<div class="down_arrow">
			<a class="scroll"><span></span></a>
		</div>
	</section>
	<section class="page_five" id="page5">
		<div class="con_wrap">
			<div class="tit_wrap">
				<h1>公告</h1>
				<div class="scissors">
					<span></span>
				</div>
				<h2>我现在做的一切仅仅是为了不让未来的自己后悔。</h2>
			</div>
			<div class="zth-skill-div">
				<div class="myinfo" style="margin-left: 50px">
					<table>
						<tbody>
							<tr>
								<td>公告类型</td>
								<td>发布人</td>
								<td>发布时间</td>
								<td>事由</td>
							</tr>
							<tr v-for="ss in inform">
								<td style="font-size: 14px">{{ss.inform_type}}</td>
								<td style="font-size: 14px" style="font-size: 14px">{{ss.teacher_name}}</td>
								<td style="font-size: 14px">{{ss.time}}</td>
								<td style="font-size: 14px"><button @click="s1(ss.inform)">查看</button></td>
							</tr>
						<tbody>
					</table>
				</div>
			</div>
		</div>
	</section>
	<div style="text-align: center;"></div>
	</div>
</body>
<!-- 主页面页面js -->
<script type="text/javascript" src="../../../js/q_main/main.js"></script>

<script>
		new Vue({
			el:'#app',
			data(){
				return{
					student_id:0,//学生id
					name:'',//姓名
					spos_id:0,//职位id
					address:'',//地址
					url:'',//头像路径
					sex:0,//性别
					grade_id:0,//班级id
					phone:'',//联系方式
					age:0,//年龄
					identity:'',//身份证号
					entry_time:'',//入学时间
					a_id:0,//账号id
					
					teacher_id:0,//班主任id
					teacher_name:'',//班主任名
					
					sexs:'',//性别翻译
					zname:'',//班级名
					username:'',//账号
					position_name:'',//职位名
					
					leave_reason:'',//请假理由
					
					leaves:[],//储存请假记录
					attendance:[],//储存考勤记录
					inform:[],//储存公告
					
					
				}
			},
			mounted:function(){
				this.studentShow();
				this.informShow();
			},
			methods:{
				studentShow:function(){
					axios.get('/student/findbyIds').then(res=>{
						var o=res.data.data;
						this.name=o.name;
						this.spos_id=o.spos_id;
						this.address=o.address;
						this.url=o.url;
						this.a_id=o.a_id;
						this.phone=o.phone;
						this.sex=o.sex;
						this.age=o.age;
						this.identity=o.identity;
						this.grade_id=o.grade_id;
						this.entry_time=o.entry_time;
						this.url=o.url;
						this.student_id=o.student_id;
						if(o.sex==1){
							this.sexs='男';
						}else{
							this.sexs='女';	
						}
						
						if(this.student_id!=0){
							this.leaveShow(this.student_id);
							this.attendanceShow(this.student_id);
						}
						if(this.spos_id!=0){
							this.sposhow(this.spos_id);
						}
						if(this.grade_id!=0){
							this.gradeShow(this.grade_id);
						}
						if(this.a_id!=0){
							this.accountShoq(this.a_id);
						}
						
					},err=>{
						console.log(err);
					});
				},
				//显示职位
				sposhow:function(spos_id){
					axios.get('/spos/findById?id='+spos_id).then(res=>{
						var o=res.data.data;
						this.position_name=o.position_name;
					},err=>{
						console.log(err);
					});
				},
				//显示班级
				gradeShow:function(grade_id){
					axios.get('/grade/findbyId?grade_id='+grade_id).then(res=>{
						var o=res.data.data;
						console.log(o);
						this.zname=o.zname;
						this.teacher_id=o.teacher_id;
						
						if(this.teacher_id!=0){
							this.teacherShow(this.teacher_id);
						}
					},err=>{
						console.log(err);
					});
				},
				//显示账号
				accountShoq:function(id){
					axios.get('/account/findById?id='+id).then(res=>{
						var o=res.data.data;
						this.username=o.username;
					},err=>{
						console.log(err);
					});
				},
				//显示老师信息
				teacherShow:function(id){
					axios.get('/teacher/findbyId?teacher_id='+id).then(res=>{
						var o=res.data.data;
						this.teacher_name=o.name;
					},err=>{
						console.log(err);
					});
				},
				//显示请假记录
				leaveShow:function(id){
					axios.get('/leave/findById?id='+id).then(res=>{
						var o=res.data.list;
						console.log(o);
						this.leaves=o;
						this.leave_reason=o.leave_reason;
					},err=>{
						console.log(err);
					});
				},
				//显示考勤记录
				attendanceShow:function(id){
					axios.get('/attendan/findById?id='+id).then(res=>{
						var o=res.data.list;
						this.attendance=o;
						console.log(o);
						
					},err=>{
						console.log(err);
					});
				},
				//显示公告
				informShow:function(){
					axios.get('/inform/findAll').then(res=>{
						var o=res.data.list;
						this.inform=o;
						console.log(o);
						
					},err=>{
						console.log(err);
					});
				},
				edit:function(){
					layer.open({
					      type: 2,
					      title: '编辑',
					      //time :20000,
					      anim: 2,//弹出效果
					      maxmin: true,//最大化按钮
					      shade:[0.5, '#393D49'],//遮罩
					      skin: 'layui-layer-molv',//类样式
					      shadeClose: true, //点击遮罩关闭层
					      area : ['80%' , '680px'],//大小
					      content: 'edit.html?student_id='+this.student_id,//内容
					      scrollbar :true,//是否允许浏览器出现滚动条
					      offset: [20,200]//坐标
					});
				},
				s1:function(ss){
					 layer.open({
					      type: 1,
					      title: '事由',
					      time :20000,
					      anim: 1,//弹出效果
					      maxmin: true,//最大化按钮
					      shade:[0.5, '#393D49'],//遮罩
					      skin: 'layui-layer-molv',//类样式
					      shadeClose: true, //点击遮罩关闭层
					      area : ['300px' , '300px'],//大小
					      content: '<span style="font-size:18px">'+ss+'</span>',//内容
					      scrollbar :true,//是否允许浏览器出现滚动条
					      offset: 'auto'//坐标
					}); 
				}
			}
		});
		
		layui.use(['form', 'layedit', 'laydate','upload','jquery'], function(){
			  var form = layui.form
			  ,layer = layui.layer
			  ,layedit = layui.layedit
			  ,laydate = layui.laydate
			  ,upload = layui.upload
			  ,$=layui.jquery;
			  
		});
		
		function refresh(){
			axios.get('/account/eliminate').then(res=>{
				location.href='../account/login.html';
			},err=>{
				console.log(err);
			});
		}
	</script>
</html>
